<template>
	<view class="msg-audio audio-player" @tap="audioPlay" :style="{opacity: opcity}">
		<text class="time">语音消息 {{ time }}</text>
		<view
			class="controls play-btn"
		
			bind:tap="audioPlay">
			<image :src="style == 'self'? '/static/images/voicemsgmy.png' : '/static/images/voicemsg.png'"></image>
		</view>
		
	</view>
</template>

<script>
	let audioCtxFc = require("./audioCtxFactory");
	let playStatus = require("./playStatus");
	const innerAudioContext = uni.createInnerAudioContext();
	if (innerAudioContext) {
		innerAudioContext.obeyMuteSwitch = false;
		innerAudioContext.autoplay = true;
	  
	}else {
	  myaudio.obeyMuteSwitch = false;
	  myaudio.autoplay = true;
	}
	let inter;
	
export default {
	name: 'AudioMsg',
		props: {
			msg: {
				type: Object,
				val: {}
			},
		},
		data(){
			return {
				playStatus: playStatus,
				curStatus: playStatus.STOP,
				time: "0'",
				opcity: 1,
				comps__: {
					audioCtx: null,
				}
			}
		},
		methods: {
			audioPlay(){
				inter && clearInterval(inter)
				let audioCtx = this.comps__.audioCtx;
				var curl = ''
				uni.downloadFile({
				url: this.msg.msg.data,
				header: {
					"X-Requested-With": "XMLHttpRequest",
					Accept: "audio/mp3",
					Authorization: "Bearer " + this.msg.msg.token
				},
				success(res){
					curl = res.tempFilePath;
					console.log('音频本地',audioCtx)
					//renderableMsg.msg.url = res.tempFilePath;
					audioCtx.src = curl;
					audioCtx.play();
					
				},
				fail(e){
					console.log("downloadFile failed", e);
					uni.showToast({
						title: "下载失败",
						duration: 1000
					});
				}
			});
			
			},
	
			audioPause(auCtx){
				//let audioCtx = this.data.comps__.audioCtx;
				let audioCtx = this.comps__.audioCtx = audioCtxFc.getCtx(this.msg.mid) || auCtx
				audioCtx&&audioCtx.pause();
			},
	
			addEvent(){
				let audioCtx = this.comps__.audioCtx;
				audioCtx.onPlay(this.onPlaying);
				audioCtx.onPause(this.onPause);
				audioCtx.onWaiting(this.onPause);
				audioCtx.onStop(this.onDone);
				audioCtx.onEnded(this.onDone);
				audioCtx.onError(this.onDone);
				audioCtx.onWaiting(this.onWait)
	
				//audioCtx.onTimeUpdate(this.onTimeUpdate);
			},
	
			delEvent(){
				let audioCtx = this.comps__.audioCtx;
				audioCtx.offPlay(this.onPlaying);
				audioCtx.offPause(this.onPause);
				audioCtx.offWaiting(this.onPause);
				audioCtx.offStop(this.onDone);
				audioCtx.offEnded(this.onDone);
				audioCtx.offError(this.onDone);
				audioCtx.offWaiting(this.onWait)
				// 多次播放会丢失这个回调，所以不用卸载
				// audioCtx.offTimeUpdate(this.onTimeUpdate);
			},
		},
	
		// lifetimes
		created(){},
		beforeMount(){
			this.time= this.msg.msg.length + "''";
			this.style= this.msg.style;
			
		},
		moved(){},
		destroyed(){
			
			let audioCtx = this.comps__.audioCtx = audioCtxFc.getCtx(this.msg.mid);
			this.audioPause(audioCtx);
			this.delEvent();
			//audioCtx.destroy();
		},
		mounted(){
			let self = this
			let curl = ''
			let audioCtx = this.comps__.audioCtx = audioCtxFc.getCtx(this.msg.mid);
			
			audioCtx.autoplay = false;
			audioCtx.loop = false;
			//
			this.onPlaying = () => {
				//console.log("onPlaying", JSON.stringify(this.data));
				this.curStatus= playStatus.PLAYING;
				
				inter && clearInterval(inter)
				inter = setInterval(() => {
					let opcity = this.opcity;
					this.opcity= opcity == 1 ? 0.4 : 1
					
				}, 500)
			};
			this.onPause = () => {
				// console.log("onPause", JSON.stringify(this.data));
				// 第二次播放会立即抛出一个异常的 onPause
				if(parseInt(this.time, 10) < 1){
					return;
				}
				this.curStatus= playStatus.PAUSE;
				this.opcity= 1;
				
			};
			this.onDone = () => {
				// console.log("onDone", JSON.stringify(this.data));
				this.curStatus= playStatus.STOP,
				this.opcity= 1;
				
				clearInterval(inter)
			};
			// 多次播放会丢失这个回调
			this.onTimeUpdate = () => {
				this.time= (audioCtx.currentTime >> 0) + "'"
			};
			this.onWait = () => {
				
			}
			this.addEvent();
		},
	}
	
	
</script>

<style>
	.msg-audio.audio-player {
		position: relative;
		overflow: hidden;
		display: flex;
		transition: opacity .5s;
	}
	
	.msg-audio.audio-player .controls {
		height:40rpx;
		align-items:center;
		display:flex;
	}
	
	.msg-audio.audio-player .controls image {
		height: 48rpx;
		width: 30rpx;
		margin: 0 8rpx 0 100rpx;
	}
	
	.msg-audio.audio-player .time {
		font-size: 34rpx;
		line-height: 40rpx;
		flex: 1;
		text-align: left;
	}
	
</style>
